<!-- HTML5文件 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
		<title>Agile Lite</title>
		<link rel="stylesheet" href="assets/agile/css/agile.layout.css">
		<link rel="stylesheet" href="assets/third/seedsui/plugin/seedsui/seedsui.min.css">
		<script src="assets/third/amd/require.js"></script>
		<script id="entry" src="assets/app/js/app.require.js"></script>
	</head>
	<body>
		<div id="section_container">
			<section id="index_section" data-role="section" class="active">
				<header>
		            <div class="titlebar">
		                <h1 class="text-center">Agile Lite</h1>
		                <a class="right" data-toggle="html" href="#about">
		                    <i class="icon icon-rdoinfo"></i>
		                </a>
		            </div>
		        </header>
				<article data-role="article" id="index_article" class="active" style="top:44px;bottom:54px;">
					<div class="scroller">
						<details open>
			                <summary class="sliver">Controllers</summary>
			                <ul class="list">
			                    <li href="core/single.html" data-toggle="html">
			                        <div class="justify-content">
			                            <p>单页模式</p>
			                            <small>支持的单页模式控制器，如：section、article、modal、aside等</small>
			                        </div>
			                    </li>
			                    <li href="core/multi.html" data-toggle="html">
			                        <div class="justify-content">
			                            <p>多页模式</p>
			                            <small>支持的多页模式控制器，比如html</small>
			                        </div>
			                    </li>
			            		<li href="core/work.html" data-toggle="html">
			                        <div class="justify-content">
			                            <p>控制器原理</p>
			                            <small>控制器与组件的工作原理</small>
			                        </div>
			                    </li>
			                    <li href="core/controller.html" data-toggle="html">
			                        <div class="justify-content">
			                            <p>默认控制器的使用</p>
			                            <small>丰富默认控制器使用场景</small>
			                        </div>
			                    </li>
			                </ul>
			            </details>
			            
			            <details open>
			                <summary class="sliver">Base Components</summary>
			                <ul class="list">
			                	<li href="core/color.html" data-toggle="html">
			                        <div class="justify-content">
			                            <p>颜色样式</p>
			                            <small>可选的文字颜色和背景颜色</small>
			                        </div>
			                    </li>
			                    <li href="core/popup.html" data-toggle="html">
			                        <div class="justify-content">
			                            <p>弹窗组件</p>
			                            <small>alert、confirm以及action sheet等</small>
			                        </div>
			                    </li>
			                    <li href="core/aside.html" data-toggle="html">
			                        <div class="justify-content">
			                            <p>侧边栏组件</p>
			                            <small>aside侧边栏组件、手势驱动</small>
			                        </div>
			                    </li>
			            		<li href="core/scroll.html" data-toggle="html">
			                        <div class="justify-content">
			                            <p>滚动组件</p>
			                            <small>横向和垂直滚动组件</small>
			                        </div>
			                    </li>
			                    <li href="core/refresh.html" data-toggle="html">
			                        <div class="justify-content">
			                            <p>刷新组件</p>
			                            <small>refresh上拉和下拉刷新组件</small>
			                        </div>
			                    </li>
			                    <li href="core/slider.html" data-toggle="html">
			                        <div class="justify-content">
			                            <p>滑动组件</p>
			                            <small>slider与slider page滑动页</small>
			                        </div>
			                    </li>
			                    <li href="core/lazyload.html" data-toggle="html">
			                        <div class="justify-content">
			                            <p>懒人加载</p>
			                            <small>懒人加载延迟加载图片</small>
			                        </div>
			                    </li>
			                </ul>
			            </details>
			            
			            <details open>
			                <summary class="sliver">Render</summary>
			                <ul class="list">
			                    <li href="core/arttemplate.html" data-toggle="html">
			                        <div class="justify-content">
			                            <p>artTemplate模板</p>
			                            <small>artTemplate模板native语法示例</small>
			                        </div>
			                    </li>
			                    <li href="core/agiletemplate.html" data-toggle="html">
			                        <div class="justify-content">
			                            <p>Agile模板注入</p>
			                            <small>Agile基于artTemplate封装的模板注入</small>
			                        </div>
			                    </li>
			                </ul>
			            </details>
			            
			            <details open>
			                <summary class="sliver">Others</summary>
			                <ul class="list">
			                    <li href="core/iscrollevent.html" data-toggle="html">
			                        <div class="justify-content">
			                            <p>IScroll事件</p>
			                            <small>通过监听IScroll的相关事件示例</small>
			                        </div>
			                    </li>
			                    <li href="core/tree.html" data-toggle="html">
			                        <div class="justify-content">
			                            <p>树组件</p>
			                            <small>通过默认控制器实现树组件</small>
			                        </div>
			                    </li>
			                </ul>
			            </details>
    				</div>
    				<a data-role="scrollTop" data-toggle="scrollTop" href="#index_article" style="bottom:60px;right:4px;">
						<img src="assets/app/img/top.png" style="border: 1px solid #efefef;"></img>
					</a>
				</article>
				
				
				
				<article data-role="article" id="ui_article" style="top:44px;bottom:54px;">
					<div class="scroller">
						<p class="padded concrete">
							Agile Lite是一个无关UI的框架，只要具有独立UI风格的样式都可以在Agile Lite中使用。
						</p>
						<details open>
			                <summary class="sliver">烽火出品</summary>
			                <ul class="list">
			                    <li href="seedsui/index.html" data-toggle="html">
			                        <div class="justify-content">
			                            <p>SeedsUI</p>
			                            <small>组件丰富，资源轻量，与ExMobi完美结合</small>
			                        </div>
			                    </li>
			                    <li href="flatui/index.html" data-toggle="html">
			                        <div class="justify-content">
			                            <p>FlatUI</p>
			                            <small>扁平化小清新模板</small>
			                        </div>
			                    </li>
			                </ul>
			            </details>
			            <details open>
			                <summary class="sliver">热门第三方</summary>
			                <ul class="list">
			                    <li href="ratchet/index.html" data-toggle="html">
			                        <div class="justify-content">
			                            <p>Ratchet</p>
			                            <small>Bootstrap移动版，小巧易用</small>
			                        </div>
			                    </li>
			                    <li href="weui/index.html" data-toggle="html">
			                        <div class="justify-content">
			                            <p>WeUI</p>
			                            <small>微信官网主推UI风格组件</small>
			                        </div>
			                    </li>
			                </ul>
			            </details>
					</div>
				</article>
				
				<article data-role="article" id="case_article" style="top:44px;bottom:54px;">
					<div class="scroller">
						<details open>
			                <summary class="sliver">经典</summary>
			                <ul class="list">
			                    <li href="http://demo.exmobi.cn/process/service/ednlite/www/index.html" data-toggle="html">
			                        <div class="justify-content">
			                            <p>论坛类示例</p>
			                            <small>ExMobi开发者论坛（discuz）APP</small>
			                        </div>
			                    </li>
			                    <li href="http://demo.exmobi.cn/process/service/p9line/index.html" data-toggle="html">
			                        <div class="justify-content">
			                            <p>商城类示例</p>
			                            <small>微店、商城类的APP展示</small>
			                        </div>
			                    </li>
			                </ul>
			            </details>
			            
						<details open>
			                <summary class="sliver">其他</summary>
			                <ul class="list">
			                    <li href="http://demo.exmobi.cn/process/service/weixinlite/www/index.html" data-toggle="html">
			                        <div class="justify-content">
			                            <p>微信JS SDK示例</p>
			                            <small>集成微信JS SDK，进行授权认证和支付</small>
			                        </div>
			                    </li>
			                    <li href="http://demo.exmobi.cn/process/service/chart3/index.html" data-toggle="html">
			                        <div class="justify-content">
			                            <p>百度echarts</p>
			                            <small>集成百度echarts智能图表</small>
			                        </div>
			                    </li>
			                </ul>
			            </details>
					</div>
				</article>
				
				<article data-role="article" id="info_article" style="top:44px;bottom:54px;">
					<div class="scroller">
						
						<!--<h3>UI使用</h2>
						<p>Agile Lite是一个无关UI的框架。原则上任何具有独立CSS样式的UI都可以在Agile Lite中使用。</p>
						
						<h3>元素控制</h2>
						<p>所有的UI如果遵循Agile Lite的控制器原则都可以使用Agile Lite的一整套逻辑。</p>
						<p>原则如下：</p>
						<p>1、所有需要被控制的元素均需要具备data-role="{role}"属性，比如:data-role="section"。如果为非元素类，比如关闭窗口，则不需要</p>
						<p>2、要控制某个元素，只需要设置在触发控制的元素上添加data-toggle="{role}"即可，比如:data-toggle="section"</p>
						
						<h3>扩展</h2>
						<p>Agile Lite支持对控制器（data-toggle）和组件（data-role）的扩展</p>-->
						<div style="text-align:center;padding:10px 0px;">
		    				<a data-href="http://qm.qq.com/cgi-bin/qm/qr?k=eSLMOpIj7xpF6SGmd06KS5hy_V9wuO8C">
		    					<img src="assets/app/img/allogo.png" style="width:200px;height:200px;"></img>
		    				</a>
		    				<p>官网:<a data-href="http://www.agilelite.net">www.agilelite.net</a></p>
		    			</div>
		    			<div style="text-align:center;padding:20px 0px;">
		    				<a data-href="http://qm.qq.com/cgi-bin/qm/qr?k=eSLMOpIj7xpF6SGmd06KS5hy_V9wuO8C">
		    					<img src="assets/app/img/qrcode.png" style="width:200px;height:200px;"></img>
		    				</a>
		    				<p>QQ群号：<a data-href="http://qm.qq.com/cgi-bin/qm/qr?k=eSLMOpIj7xpF6SGmd06KS5hy_V9wuO8C">498752673</a></p>
		    			</div>
					</div>
				</article>
				
				<footer>
					<ul class="menubar">
		                <li class="tab active" data-role="tab" href="#index_article" data-toggle="article">
		                    <i class="icon icon-home-fill"></i>
		                    <label class="tab-label">基础</label>
		                </li>
		                <li class="tab" data-role="tab" href="#ui_article" data-toggle="article">
		                    <i class="icon icon-chattip"></i>
		                    <label class="tab-label">组件</label>
		                </li>
		                <li class="tab" data-role="tab" href="#case_article" data-toggle="article">
		                    <i class="icon icon-contact"></i>
		                    <label class="tab-label">示例</label>
		                </li>
		                <li class="tab" data-role="tab" href="#info_article" data-toggle="article">
		                    <i class="icon icon-app"></i>
		                    <label class="tab-label">关于</label>
		                </li>
		            </ul>
				</footer>
				
				
			</section>
		</div>

		<script>
		
		require(['jquery'], function($){
			$(document).on('agileready', function(){
				$('a[data-href]').on(A.options.clickEvent, function(){
					var href = $(this).data('href');
					try{
						NativeUtil.browser(href);
					}catch(e){
						location.href = href;
					}
				});
			});
		});
		</script>
	</body>
</html>